<template>
  <div class="goods-detail" v-if="detailData">
  	<!-- 头部 -->
		<shop-header>	
			<div class="goods-tab-nav">
				<div class="header-tab-item" :class="{ active: nowIndex == 0  }" @click="toggleSwithTab(0)"><span>商品</span></div>
				<div class="header-tab-item" :class="{ active: nowIndex == 1  }" @click="toggleSwithTab(1)"><span>详情</span></div>
				<div class="header-tab-item" :class="{ active: nowIndex == 2  }" @click="toggleSwithTab(2)"><span>评论</span></div>
			</div>	
		</shop-header>
		<!-- 商品 -->
		<div class="goods-wrapper" v-if="nowIndex == 0 || nowIndex == 1">
			<!-- 商品滚动大图 -->
	    <goods-swiper :pic="detailData.goodsGallery" padd-bom="100%" class="banner" :class="{ 'bottom-1px': !detailData.isSeckill }"></goods-swiper>
	    <div v-if="detailData.isSeckill" class="seckill-part">
	    	<div class="seckill-price-wrap">
	    		<div class="seckill-price">¥<span>{{ detailData.seckillPrice | toDecimal }}</span></div>
	    		<div class="seckill-btm">
	    			<div class="seckill-btm-icon">
	    				<i class="iconfont icon-miaosha"></i>
	    				<span>限时秒杀</span>
	    			</div>
	    			<span class="old-peice">¥{{ detailData.price | toDecimal }}</span>
	    		</div>
	    	</div>
	    	<div class="seckill-time-wrap">
	    		<span class="seckill-time-text">距结束还剩:</span>
					<clocker class="seckill-time" :time="detailData.endTime * 1000">
          	<span>%D</span>:<span>%H</span>:<span>%M</span>:<span>%S</span>
        	</clocker>
	    	</div>
	    </div>
	    <div class="goods-part basic-info bottom-1px">
	    	<div :style="{ paddingBottom: detailData.isSeckill ? 0 : '10px' }" class="prod-title">
	    		<span class="prod-name">{{ detailData.goodsName }}</span>
	    		<div class="favourite" @click="favourite(detailData)">
	    			<x-icon v-if="!isFavourite" type="ios-heart-outline" size="24"></x-icon>
	    			<x-icon v-if="isFavourite" :class="{ isFavourite: isFavourite }" type="ios-heart" size="24"></x-icon>
	    			<b>收藏</b>
	    		</div>
	    	</div>
	    	<div v-if="!detailData.isSeckill" class="prod-price-wrap">
	    		<i>¥</i>
	    		<span class="big-price">{{ detailData.price | toDecimal }}</span>
	    	</div>
	    </div>
	    <split></split>
	    <!-- 地址信息 -->
			<div class="goods-part">
				<!-- <div class="part-cell-item bottom-1px" @click="doShowAddress">
					<span class="ft_title">所在地区</span>
					<span class="ft_text">{{ adressText }}</span>
				</div>
				<x-address style="display: none;" title="地区" v-model="area" raw-value :list="addressData" :show.sync="showAddress"></x-address> -->
				<div class="part-cell-item bottom-1px">
					<span class="ft_title">运费</span>
					<span class="ft_text">包邮</span>
				</div>
				<div class="part-cell-item bottom-1px" @click="openChoosePen">
					<span class="ft_title">规格</span>
					<span class="ft_text">{{ attributeText }}</span>
				</div>
				<div class="part-cell-item part-cell-child bottom-1px">
					<span class="ft_title">服务</span>
					<span class="ft_text">由商城自营发货并提供售后服务</span>
					<i class="iconfont icon-zhuyi"></i>
				</div>
			</div>
			<div class="goods-part service-floor">
				<div class="service-tip-module">
					<x-icon type="ios-checkmark-outline" size="20"></x-icon>
					<span>货到付款</span>
				</div>
				<div class="service-tip-module">
					<x-icon type="ios-checkmark-outline" size="20"></x-icon>
					<span>七天退款</span>
				</div>
				<div class="service-tip-module">
					<x-icon type="ios-checkmark-outline" size="20"></x-icon>
					<span>极速达</span>
				</div>
			</div>
			<div class="goods-part comment-wrapper" v-if="headComments && headComments.length > 0">
				<group gutter="10px">
					<cell class="comment-top-cell" :title="commentTitle" @click.native="tocomment" is-link>
						<span class="comment-text">好评 <b>{{ commentCount.favorable }}</b></span>
					</cell>
				</group>
				<!-- 评论列表 -->
				<v-comment :comments="headComments"></v-comment>
			</div>
			<!-- 商品详情 -->
			<div v-if="detailData.goodsDesc" ref="detailWarpper" class="goods-part detail-info">
				<group gutter="10px">
					<cell>
						<span slot="title" style="font-size: 16px">商品详情</span>
					</cell>
				</group>
				<div class="content" v-html="detailData.goodsDesc"></div>
			</div>
			<!-- 商品选择组件 -->
			<choose-shop ref="chooseShop" :data="detailData" @onCount="onCount" @onChoose="onChoose" @selSkuId="selSkuId"></choose-shop>
		</div>
		<!-- 商品评论 -->
		<div class="comment-wrapper" v-show="nowIndex == 2">
			<div class="comment-tab-wrapper">
				<ul v-if="commentCount" class="comment-tab bottom-1px" :style="{ position: !isScrollDown?'fixed':'relative' }">
					<li class="comment-tab-item" :class="{ active: commentIndex == 0 }" @click="togglecommentTab(0)">
						<span>全部</span>
						<b>{{ commentCount.all }}</b>
					</li>
					<li class="comment-tab-item" :class="{ active: commentIndex == 1 }" @click="togglecommentTab(1)">
						<span>好评</span>
						<b>{{ commentCount.great }}</b>
					</li>
					<li class="comment-tab-item" :class="{ active: commentIndex == 2 }" @click="togglecommentTab(2)">
						<span>中评</span>
						<b>{{ commentCount.good }}</b>
					</li>
					<li class="comment-tab-item" :class="{ active: commentIndex == 3 }" @click="togglecommentTab(3)">
						<span>差评</span>
						<b>{{ commentCount.inferior }}</b>
					</li>
					<li class="comment-tab-item" :class="{ active: commentIndex == 4 }" @click="togglecommentTab(4)">
						<span>有图</span>
						<b>{{ commentCount.photo }}</b>
					</li>
				</ul>
			</div>	
			<v-comment 
				v-infinite-scroll="loadMore"
	      infinite-scroll-disabled="commentsOpt.loading"
	      infinite-scroll-distance="10"
				:comments="comments"></v-comment>	
				<div class="spinner-wrapper">
          <mt-spinner v-show="commentsOpt.loading && comments.length > 0" class="triple-bounce" type="triple-bounce"></mt-spinner>
          <load-more v-show="commentsOpt.nomore && comments.length > 0" :show-loading="false" tip="暂无更多数据" background-color="#f5f5f5"></load-more>
        </div>
			<no-results v-if="comments.length == 0"></no-results>	
		</div>
		<goods-bottom-cart :params="cartParams" :totalStock="totalStock" @open-choose="btmOpenChoose"></goods-bottom-cart>
  </div>
</template>

<script>
import { Group, Cell, LoadMore, Clocker } from 'vux'
import { mapGetters, mapActions } from 'vuex'
import ShopHeader from '@/components/public/ShopHeader'
import GoodsSwiper from '@/components/goods/GoodsSwiper'
import Split from '@/components/public/Split'
import VComment from '@/components/public/Comment'
import ChooseShop from '@/components/goods/ChooseShop'
import NoResults from '@/components/public/NoResults'
import GoodsBottomCart from '@/components/goods/GoodsBottomCart'
import { getNowTime, toDecimal } from '@/utils/mUtils'
import http from '@/utils/http'
export default {
	components: {
		ShopHeader,
		GoodsSwiper,
		Group,
		Cell,
		Split,
		VComment,
		ChooseShop,
		GoodsBottomCart,
		Clocker,
		NoResults,
		LoadMore
	},
  data () {
  	return {
  		isFavourite: false,
  		nowIndex: 0,
  		isScrollDown: true,
  		detailIndex: 0,
  		commentIndex: 0,
  		isBtmChoose: false,
  		count: 1,
  		detailData: null,
  		headComments: [],
  		comments: [],
  		commentsOpt: {
  			nomore: false,
  			loading: true,
  			page: 1,
  			limit: 8,
  		},
  		commentCount: null,
  		getSelAttrs: null,
  		cartParams: {
  			goodsId: null,
  			skuId: null,
  			type: 'add'
  		}
  	}
  },
  computed: {
  	...mapGetters(['collectList']),
  	totalStock () {
  		if (this.detailData.totalStock) {
  			return this.detailData.totalStock
  		}
  		return this.detailData.seckillStock
  	},
  	attributeText () {
  		let arr = []
  		if (this.getSelAttrs) return this.getSelAttrs
			if (this.detailData.attribute) {
				this.detailData.attribute.forEach(item => {
  				arr.push(item.attrName)
  			})
  			return `选择 ${arr.join(',')}`
			}
  	},
  	commentTitle () {
  		return `评价(${ this.commentCount.all })`
  	},
  	switchIcon () {
  		if (this.isFavourite) {
  			return 'ios-heart'
  		}
  		return 'ios-heart-outline'
  	},
  	favouriteText () {
  		if (this.isFavourite) return '已收藏!'
  		return '取消收藏!'	
  	}
  },
  methods: {
  	...mapActions(['addBrowse']),
  	// 上拉加载更多评论
  	loadMore () {
      if (!this.commentsOpt.nomore && this.nowIndex == 2) {
        this.commentsOpt.loading = true
        setTimeout(() => {
          this._getComments('all', this.$route.query.id)
        }, 500)
      }
    },
  	selSkuId (val) {
  		this.cartParams.skuId = val
  	},
  	onCount (val) {
  		this.count = val
  	},
  	onChoose (val) {
  		this.getSelAttrs = val
  	},
  	btmOpenChoose (val) {
  		this.isBtmChoose = val
  	},
  	toggleSwithTab (index) {
  		this.nowIndex = index
  		if (this.nowIndex == 1 && this.$refs.detailWarpper) {
  			let offsetTop = this.$refs.detailWarpper.offsetTop
  			window.scrollTo(0, offsetTop - 42)
  		}else {
  			window.scrollTo(0, 0)
  		}

  		if (this.nowIndex == 2) {
  			this.commentsOpt.page = 1
  			this.comments = []
  			this._getComments('all', this.$route.query.id)
  		}
  	},
  	togglecommentTab (index) {
  		this.commentIndex = index
  		this.commentsOpt.page = 1
  		this.comments = []
  		window.scrollTo(0, 0)
  		let method = ''
  		switch (index) {
  			case 0:
  				method = 'all'
  				break;
  			case 1:
  				method = 'great'
  				break;
  			case 2:
  				method = 'good'
  				break;
  			case 3:
  				method = 'inferior'
  				break;
  			case 4:
  				method = 'photo'
  				break;				
  		}
  		this._getComments(method, this.$route.query.id)
  	},
  	tocomment () {
  		this.nowIndex = 2
  		this.commentsOpt.page = 1
			this.comments = []
			this._getComments('all', this.$route.query.id)
  		window.scrollTo(0, 0)
  	},
  	favourite (data) {
  		let that = this
  		this.isFavourite = !this.isFavourite
  		this.$store.dispatch('toggleCollect', data)
  		this.$vux.toast.show({
  			text: that.favouriteText,
  			type: 'success',
  			width: '151px',
  			position: 'middle'
  		})
  	},
  	// 判断滚动条滚动方向
  	_scroll () {
  		var beforeScrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	    window.addEventListener("scroll", () => {
	        var afterScrollTop = document.body.scrollTop || document.documentElement.scrollTop,
	            delta = afterScrollTop - beforeScrollTop;
	        if( delta === 0 ) return false;
	        beforeScrollTop = afterScrollTop;
	        if (delta > 0) {
	        	this.isScrollDown = true	        	
	        }else {
	        	this.isScrollDown = false
	        }
	    }, false);
  	},
  	openChoosePen () {
  		this.$refs.chooseShop.toogleChoosePen()
  	},
    _getGoodsById (goodsId) {
    	http.get('/api/v1/getGoodsById', { id: goodsId }, false, res => {
    		if (res.status == 1) {
    			this.detailData = res.data
    			// 添加浏览记录
  				this.addBrowse(this.detailData)
    			this.cartParams = {
						goodsId: this.detailData._id,
						type: 'add'	
					}
    			if (this.detailData.goodsId) {
    				this.cartParams.goodsId = this.detailData.goodsId
    			}
    			
					if (this.detailData.skuResult) {
						this.cartParams.skuId = this.detailData.skuResult[0]._id
					}
    		}
    	})
    },
    // 获取商品评论
    _getComments (methods, goodsId) {
    	let params = {
    		goodsId,
    		page: this.commentsOpt.page,
    		limit: this.commentsOpt.limit
    	}
    	http.get('/api/v1/getGoodsComments/' + methods, params, false, res => {
    		if (res.status == 1 && res.data.length > 0) {
    			res.data.forEach(item => {
    				this.comments.push(item)
    			})
    			this.commentCount = res.count
    			this.commentsOpt.page++
    			if (res.data.length < this.commentsOpt.limit) {
    				this.commentsOpt.nomore = true
    			}else {
    				this.commentsOpt.nomore = false
    			}       
          this.commentsOpt.loading = false
    		}else {
    			this.commentsOpt.loading = false
          this.commentsOpt.nomore = true
          return
    		}
    	})
    }
  },
  mounted () {
  	this._scroll()
  	let goodsId = this.$route.query.id 
  	this._getGoodsById(goodsId)	 
  	this.collectList.forEach(n => {
  		if (n._id == goodsId) {
  			this.isFavourite = true
  		}
  	})
  	http.get('/api/v1/getGoodsComments/all', { goodsId, page: 1, limit: 3, isHideLoad: true }, false, res => {
  		if (res.status == 1) {
  			this.headComments = res.data
  			this.commentCount = res.count

  		}
  	})
  },
  watch: {
  	isBtmChoose (val) {
  		if(val) {
  			this.openChoosePen()
  			this.isBtmChoose = !val
  		}
  	} 
  },
  filters: {
  	toDecimal (val) {
  		return toDecimal(val)
  	}
  }
}
</script>

<style scoped>
.goods-tab-nav {
	position: relative;
	z-index: 99;
	display: flex;
	padding: 0 30px;
	margin: -6px 0;
	height: 43px;
}
.header-tab-item {
	flex: 1;
	text-align: center;
}
.goods-tab-nav span {
	position: relative;
	display: inline-block;
	font-size: 14px;
	color: #333; 
	line-height: 43px;
}
.header-tab-item.active span:after {
	content: '';
	position: absolute;
	bottom: -1px;
	display: block;
	width: 100%;
	height: 2px;
	background: #222;
}
.header-tab-item.active span {
	font-size: 15px;
	font-weight: 600;
}
.basic-info {
	background: #fff;
	padding: 0 15px 10px 15px;
}
.prod-title {
	display: flex;
	padding: 5px 0 10px 0;
}
.prod-title .prod-name {
	flex: 1;
	margin-right: 20px;
	font-size: 14px;
	color: #232326;
	line-height: 20px;
}
.favourite {
	flex: 0 0 auto;
	text-align: center;
	font-size: 0;
	padding-top: 1px;
}
.favourite svg {
	display: inline-block;
	fill: #999;
	line-height: normal;
}
.favourite b {
	display: block;
	font-weight: normal;
	font-size: 10px;
	color: #999;
	line-height: 14px;
}
.isFavourite {
	fill: #f23030 !important;
}
.prod-price-wrap {
	font-size: 0;
	color: #f23030;
	line-height: 18px;
	height: 18px;
}
.prod-price-wrap i {
	font-weight: 700;
	font-size: 12px;
	display: inline-block;
	padding-right: 2px;
}
.big-price {
	font-weight: 700;
	font-size: 18px;
}
.part-cell-item {
	position: relative;
	display: flex;
	padding: 10px 15px;
	background: #fff;
} 
.part-cell-item:active {
	background: #f8f8f8;
}
.part-cell-item:before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: relative;
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 17px;
}
.part-cell-child:before {
	display: none;
}
.part-cell-child .iconfont {
	position: absolute;
	right: 15px;
	top: 0;
	margin-top: 7px;
	color: #999;
	font-size: 16px;
}
.part-cell-item:after {
	bottom: 0;
}
.part-cell-item,
.ft_text {
	font-size: 13px;
}
.ft_title {
	flex: 0 0 40px;
	width: 40px;
	color: #999;
}
.ft_text {
	flex: 1;
	padding-right: 25px;
	color: #333;
}
.service-floor {
	padding: 10px 15px;
	font-size: 0;
	background: #f7f8fa;
}
.service-tip-module {
	display: inline-block;
	margin-right: 8px;
}
.service-tip-module svg,
.service-tip-module span {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	color: #81838e;
}
.service-tip-module svg {
	fill: #f23030;
	margin-right: 2px;
}
.comment-top-cell {
	font-size: 13px;
	color: #81838e;
}
.comment-text {
	font-size: 13px;
	color: #333;
}
.comment-text b {
	font-weight: normal;
	color: #f15353;
}
.tab-item.active {
	color: #f15353;
}
.content,.content p,.content span {
	font-size: 13px;
	color: #666;
	line-height: 20px;
}
.content img {
	display: inline;
	max-width: 100%;
}
.comment-tab-wrapper {
	height: 48px;
}
.comment-tab {
	display: flex;
	background: #fff;
	width: 100%;
	max-width: 640px;
	z-index: 97;
}
.comment-tab:after {
	bottom: 0;
}
.comment-tab li {
	flex: 1;
	padding: 8px 0;
	text-align: center;
}
.comment-tab li span,
.comment-tab li b {
	display: block;
	font-size: 13px;
	line-height: normal;
	font-weight: normal;
	color: #9a9a9a;
	padding-top: 1px;
}
.comment-tab li.active span,
.comment-tab li.active b {
	color: #f23030;
}
.seckill-part {
	display: flex;
	background: #feeae9
}
.seckill-price-wrap {
	padding: 0 15px;
	flex: 1;
	background: linear-gradient(to right,#ef3390,#ef3647);
}
.seckill-price {
	font-size: 14px;
	color: #fff;
	padding-top: 3px;
}
.seckill-price span {
	font-size: 26px;
	line-height: 26px;
}
.seckill-btm {
	display: flex;
}
.seckill-btm {
	font-size: 12px;
	color: #fff;
	padding-bottom: 5px;
}
.seckill-btm-icon,
.old-peice {
	display: inline-block;
	vertical-align: middle;
}
.seckill-btm-icon {
	font-size: 0;
	border-radius: 3px;
	border: 1px solid #fff;
	height: 14px;
	line-height: 14px;
}
.seckill-btm-icon i {
	font-size: 12px;
	color: #ef3390;
	background: #fff;
	padding: 0 1px;
}
.seckill-btm-icon span {
	font-size: 12px;
	color: #fff;
	padding: 0 3px;
}
.old-peice {
	font-size: 12px;
	color: #fff;
	line-height: 14px;
	margin-left: 5px;
	text-decoration: line-through;
}
.seckill-time-wrap {
	flex: 0 0 auto;
	text-align: center;
	padding: 0 15px;
}
.seckill-time-text {
	margin: 6px 0 4px;
  display: block;
  font-size: 11px;
  line-height: 11px;
  color: #e8063c;
}
.seckill-time {
	color: #ef3561; 
}
.seckill-time span {
	display: inline-block;
  width: 20px;
  height: 24px;
  border-radius: 5px;
  background-color: #ef3561;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
}
</style>
